<template>
	<view class="mine_box">
		<!-- 我的页面logo -->
		<view class="mine_logo">
			<cover-image src="@/static/mineImg/457537500b36e75b6f688e3788b4645_03.png"></cover-image>
		</view>
		<!-- main内容 -->
		<view class="mine_con">
			<!-- 用户登录信息和会员还有任务中心 -->
			<view class="mine_con_user">
				<!-- 用户 -->
				<view class="mine_user" @click="toEditPage">
					<view class="name">
						你好·<text>{{userMsg}}</text>
					</view>
					<view class="brief">
						江门起源，灵感寻味
					</view>
				</view>
				<!-- GO会员 -->
				<view class="mine_member">
					<view class="">
						<view class="GO_member">
							<text class="member">GO会员</text>
							<text class="member_brief">成为星球会员享双倍积分</text>
						</view>
						<view class="grade">
							<text class="grade_text">Lv{{2}}</text>
						</view>
					</view>
					<view class="">
						<view class="">
							<cover-image class="img" src="@/static/mineImg/jifen_1.png"></cover-image>
							<text class="mine_member_num">{{22}}</text>
							<text class="mine_member_text">积分商城</text>
						</view>
						<view class="">
							<cover-image class="img" src="@/static/mineImg/youhuiquan.png"></cover-image>
							<text class="mine_member_num">{{0}}</text>
							<text class="mine_member_text">喜茶券</text>
						</view>
						<view class="">
							<cover-image class="img" src="@/static/mineImg/jifen.png"></cover-image>
							<text class="mine_member_num">{{0}}</text>
							<text class="mine_member_text">积分商城</text>
						</view>
					</view>
				</view>
				<!-- 任务中心 -->
				<view class="mine_task_center">
					<view class="">
						<view class="">
							任务中心
						</view>
						<view class="">
							MISS CENTER
						</view>
					</view>
					<cover-image class="img" src="@/static/mineImg/teskLogo.png"></cover-image>
				</view>
			</view>
			<!-- 开通礼包 -->
			<view class="open_the_gift_bag">
				<view class="open_the_gift_bag_top">
					<view class="openBag">
						开通礼包
					</view>
					<view class="more">
						更多
					</view>
				</view>
				<view class="open_the_gift_bag_con">
					<view v-for="item in my.openBagData" :key="item.id">
						<image class="img" :src="item.img"></image>
						<!-- <image class="img" src="@/static/mineImg/bc2379d0d614eabb4a8c80642aa46bf_03.png"></image> -->

						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
			<!-- mine_con_bottom -->
			<view class="mine_con_bottom">
				<uni-list>
					<uni-list-item title="会员码" link rightText="门店扫码积分和阿喜有礼卡支付" @click="onClick()"></uni-list-item>
					<uni-list-item title="兑换中心" link rightText="兑换星球会员、喜茶券和阿喜有礼卡" @click="onClick()"></uni-list-item>
					<uni-list-item title="星球封面" link @click="onClick()"></uni-list-item>
				</uni-list>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				userMsg: "请登录", //用户名称
				flag: false,
				userData: null, //用户信息
			}
		},
		computed: {
			...mapState({
				my: "my"
			})
		},
		onLoad() {
			if (uni.getUserProfile) {
				this.canIUseGetUserProfile = true
			}
		},
		mounted() {
			let that = this
			// 获取本地存储的信息
			uni.getStorage({
				key: 'usertoken',
			 success: function(res) {
					that.userMsg = res.data.nickName
					that.userData = res.data
					that.flag = true
				}
			});
			// 退出登录
			// uni.removeStorage({
			//     key: 'usertoken',
			//     success: function (res) {
			//         console.log('success');
			//     }
			// });
		},   
		methods: {
			// 请登录
			toEditPage(e) {
				e.stopPropagation()
				if (this.flag) {
					uni.navigateTo({
						url: '/pages/my/editMineMsg/index?userData=' + JSON.stringify(this.userData) + ''
					});
				}

				this.getUserProfile()
			},
			getUserProfile(e) {
				if (this.flag === false) {
					// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
					// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
					uni.getUserProfile({
						desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
						success: (res) => {
							uni.showLoading({
								title: '登录中',
							})
							setTimeout(function() {
								// 关闭加载小弹框
								uni.hideLoading()
								// 设置本地存储信息
								uni.setStorage({
									key: "usertoken",
									data: res.userInfo,
								})
								uni.reLaunch({
									url: "/pages/my/my",
									success() {
										uni.showLoading({
											title: '登录成功',
										})
										setTimeout(() => {
											// 关闭加载小弹框
											uni.hideLoading()
										},200)
									}
								})
							}, 1000)
						}
					})
				}
			},
		}
	}
</script>

<style scoped>
	.mine_box {
		width: 100%;
	}

	/* 用户 */
	.mine_con_user {
		width: 100%;
		padding: 0px 15px;
		box-sizing: border-box;
		margin-top: 5px;
	}

	.mine_con_user .mine_user {
		color: #DBA871;
	}

	.mine_con_user .mine_user .name {
		font-size: 16px;
		font-weight: bold
	}

	.mine_con_user .mine_user .brief {
		font-size: 13px;
	}

	/* GO会员 */
	.mine_con_user .mine_member {
		width: 100%;
		height: auto;
		padding: 15px;
		background: #fff;
		border-radius: 5px;
		box-sizing: border-box;
		margin-top: 10px;
		margin-bottom: 15px;
	}

	.mine_con_user .mine_member>view:nth-child(1) {
		box-shadow: 0px 1px 0px #f6f6f6;
		padding-bottom: 5px;
	}

	.mine_con_user .mine_member>view:nth-child(1) .GO_member .member {
		color: #000000;
		font-weight: bold;
	}

	.mine_con_user .mine_member>view:nth-child(1) .GO_member .member_brief {
		font-size: 11px;
		background: #F2F2F2;
		color: #777;
		margin-left: 5px;
		padding: 1px 10px;
		border-radius: 20px;
	}

	.mine_con_user .mine_member>view:nth-child(1) .grade .grade_text {
		display: inline-block;
		font-size: 10px;
		border: 1px solid #AAAAAA;
		border-radius: 2px;
		width: 35px;
		line-height: 16px;
		text-align: center;
	}

	.mine_con_user .mine_member>view:nth-child(2) {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
	}

	.mine_con_user .mine_member>view:nth-child(2) view {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.mine_con_user .mine_member>view:nth-child(2) view text {
		font-size: 12px;
		color: #777777;
	}

	.mine_con_user .mine_member>view:nth-child(2) view .mine_member_num {
		font-size: 14px;
		color: #777777;
		font-weight: bold;
		line-height: 25px;
	}

	.mine_con_user .mine_member>view:nth-child(2) .img {
		width: 35px;
		height: 30px;
	}

	/* 任务中心 */
	.mine_con_user .mine_task_center {
		width: 100%;
		height: auto;
		padding: 15px;
		background: #fff;
		border-radius: 5px;
		box-sizing: border-box;
		margin-top: 10px;
		margin-bottom: 15px;
		display: flex;
		justify-content: space-between;
	}

	.mine_con_user .mine_task_center>view {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		align-self: center;
		font-size: 12px;
		color: #777777;
		margin-left: 40px;
	}

	.mine_con_user .mine_task_center>view view:nth-child(1) {
		font-size: 14px;
		font-weight: bold;

	}

	.mine_con_user .mine_task_center .img {
		width: 120px;
	}

	/* 开通礼包 */
	.open_the_gift_bag {
		width: 100%;
		height: auto;
		background: #ffffff;
		padding: 10px 15px;
		margin-bottom: 20px;
		box-sizing: border-box;
	}

	.open_the_gift_bag .open_the_gift_bag_top {
		width: 100%;
		height: 40px;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		align-items: center;
		font-size: 14px;
	}

	.open_the_gift_bag .open_the_gift_bag_top .openBag {
		font-weight: bold;
		font-size: 13px;
	}

	.open_the_gift_bag .open_the_gift_bag_top .more {
		font-size: 13px;
	}

	.open_the_gift_bag .open_the_gift_bag_con {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;

	}

	.open_the_gift_bag .open_the_gift_bag_con>view {
		width: 30%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		margin-top: 10px;
	}

	.open_the_gift_bag .open_the_gift_bag_con>view text {
		font-size: 13px;
		line-height: 40px;
		color: #333333;
	}

	.open_the_gift_bag .open_the_gift_bag_con .img {
		width: 30px;
		height: 30px;
	}

	/* mine_con_bottom */
	.mine_con_bottom {
		margin-bottom: 30px;
	}
</style>
